import React from "react";
import { Tabs } from "antd";
import "./shedulingadd.less";
import Stepper from "../Srepper/Srepper";
export default function sheduling_add() {
  const { TabPane } = Tabs;
  function callback(key: any) {
    console.log(key);
  }
  return (
    <div>
      <p className="sheduling-p">薪资奖励</p>
      <Tabs defaultActiveKey="1" onChange={callback} animated={false}>
        <TabPane tab="全职薪资设置" key="1">
          <div>
            <div className="addone">
              <div>骑手类型：</div>
              <div style={{ marginLeft: "50px" }}>全职转送</div>
            </div>
            <div className="addone">
              <div>结算方式：</div>
              <div style={{ marginLeft: "50px" }}>月结</div>
            </div>
            <div className="one">
              <div
                style={{
                  marginLeft: "10px",
                  backgroundColor: "#F5F5F5",
                  width: "70px",
                  borderRadius: "5px",
                  textAlign: "center",
                  marginTop: "-60px",
                }}
              >
                <i>配送薪资</i>
              </div>
              <div className="addone">
                <div>基本工资：</div>
                <div>
                  <Stepper
                    initialValue={3000}
                    step={100}
                    inputWidth="210px"
                    inputHeight="33px"
                  />
                </div>
                <div style={{ marginLeft: "10px", marginTop: "5px" }}>元</div>
              </div>
              <div className="addone">
                <div>话费补助：</div>
                <div>
                  <Stepper
                    initialValue={300}
                    step={100}
                    inputWidth="210px"
                    inputHeight="33px"
                  />
                </div>
                <div style={{ marginLeft: "10px", marginTop: "5px" }}>元</div>
              </div>
            </div>

            <div className="ones">
              <div
                style={{
                  marginLeft: "8px",
                  backgroundColor: "#F5F5F5",
                  width: "70px",
                  borderRadius: "5px",
                  textAlign: "center",
                  marginTop: "-60px",
                }}
              >
                <i>配送提成</i>
              </div>
              <div className="addone">
                <div style={{ marginLeft: "10px" }}>最低订单量：</div>
                <div>
                  <Stepper
                    initialValue={3}
                    step={1}
                    inputWidth="210px"
                    inputHeight="33px"
                    inputLeft="35px"
                  />
                </div>
                <div style={{ marginLeft: "10px", marginTop: "5px" }}>
                  元/单
                </div>
              </div>
              <div className="addone">
                <div>超300单奖励：</div>
                <div>
                  <Stepper
                    initialValue={4}
                    step={1}
                    inputWidth="210px"
                    inputHeight="33px"
                    inputLeft="35px"
                  />
                </div>
                <div style={{ marginLeft: "10px", marginTop: "5px" }}>
                  元/单
                </div>
              </div>
              <div className="addone">
                <div>超600单奖励：</div>
                <div>
                  <Stepper
                    initialValue={5}
                    step={1}
                    inputWidth="210px"
                    inputHeight="33px"
                    inputLeft="35px"
                  />
                </div>
                <div style={{ marginLeft: "10px", marginTop: "5px" }}>
                  元/单
                </div>
              </div>
              <div className="addone">
                <div>超800单奖励：</div>
                <div>
                  <Stepper
                    initialValue={6}
                    step={1}
                    inputWidth="210px"
                    inputHeight="33px"
                    inputLeft="35px"
                  />
                </div>
                <div style={{ marginLeft: "10px", marginTop: "5px" }}>
                  元/单
                </div>
              </div>
            </div>
            <button
              style={{
                width: "100px",
                height: "40px",
                marginLeft: "100px",
                marginTop: "20px",
                backgroundColor: "#4a91f7",
                borderRadius: "50px",
                border: "1px solid #ffff",
                color: "#ffff",
              }}
            >
              保存{" "}
            </button>
          </div>
        </TabPane>
        <TabPane tab="兼职薪资设置" key="2">
          <div>
            <div className="addone">
              <div>骑手类型：</div>
              <div style={{ marginLeft: "50px" }}>众包</div>
            </div>
            <div className="addone">
              <div>结算方式：</div>
              <div style={{ marginLeft: "50px" }}>日结</div>
            </div>
            <div className="one">
              <div
                style={{
                  marginLeft: "10px",
                  backgroundColor: "#F5F5F5",
                  width: "70px",
                  borderRadius: "5px",
                  textAlign: "center",
                  marginTop: "-60px",
                }}
              >
                <i>配送薪资</i>
              </div>
              <div className="addone">
                <div>基本工资：</div>
                <div>
                  <Stepper
                    initialValue={0}
                    step={100}
                    inputWidth="210px"
                    inputHeight="33px"
                  />
                </div>
                <div style={{ marginLeft: "10px", marginTop: "5px" }}>元</div>
              </div>
              <div className="addone">
                <div>话费补助：</div>
                <div>
                  <Stepper
                    initialValue={10}
                    step={100}
                    inputWidth="210px"
                    inputHeight="33px"
                  />
                </div>
                <div style={{ marginLeft: "10px", marginTop: "5px" }}>元</div>
              </div>
            </div>

            <div className="ones">
              <div
                style={{
                  marginLeft: "10px",
                  backgroundColor: "#F5F5F5",
                  width: "70px",
                  borderRadius: "5px",
                  textAlign: "center",
                  marginTop: "-60px",
                }}
              >
                <i>配送提成</i>
              </div>
              <div className="addone">
                <div style={{ marginLeft: "8px" }}>1-20单提成：</div>
                <div>
                  <Stepper
                    initialValue={3}
                    step={1}
                    inputWidth="210px"
                    inputHeight="33px"
                    inputLeft="35px"
                  />
                </div>
                <div style={{ marginLeft: "10px", marginTop: "5px" }}>
                  元/单
                </div>
              </div>
              <div className="addone">
                <div>21-40单提成：</div>
                <div>
                  <Stepper
                    initialValue={4}
                    step={1}
                    inputWidth="210px"
                    inputHeight="33px"
                    inputLeft="35px"
                  />
                </div>
                <div style={{ marginLeft: "10px", marginTop: "5px" }}>
                  元/单
                </div>
              </div>
              <div className="addone">
                <div>41-60单提成：</div>
                <div>
                  <Stepper
                    initialValue={5}
                    step={1}
                    inputWidth="210px"
                    inputHeight="33px"
                    inputLeft="35px"
                  />
                </div>
                <div style={{ marginLeft: "10px", marginTop: "5px" }}>
                  元/单
                </div>
              </div>
              <div className="addone">
                <div style={{ marginLeft: "-7px" }}>80单以上提成：</div>
                <div>
                  <Stepper
                    initialValue={6}
                    step={1}
                    inputWidth="210px"
                    inputHeight="33px"
                    inputLeft="35px"
                  />
                </div>
                <div style={{ marginLeft: "10px", marginTop: "5px" }}>
                  元/单
                </div>
              </div>
            </div>
            <button
              style={{
                width: "100px",
                height: "40px",
                marginLeft: "100px",
                marginTop: "20px",
                backgroundColor: "#4a91f7",
                borderRadius: "50px",
                border: "1px solid #ffff",
                color: "#ffff",
              }}
            >
              保存{" "}
            </button>
          </div>
        </TabPane>
        <TabPane tab="骑手补贴设置" key="3">
          <div>
            <div className="addone">
              <div>骑手类型：</div>
              <div style={{ marginLeft: "50px" }}>全职&兼职</div>
            </div>
            <div className="addone">
              <div>结算方式：</div>
              <div style={{ marginLeft: "50px" }}>日结</div>
            </div>
            <div className="one">
              <div
                style={{
                  marginLeft: "10px",
                  backgroundColor: "#F5F5F5",
                  width: "70px",
                  borderRadius: "5px",
                  textAlign: "center",
                  marginTop: "-60px",
                }}
              >
                <i>时段补贴</i>
              </div>
              <div className="addone">
                <div style={{ marginLeft: "-7px" }}>0-3点补贴：</div>
                <div>
                  <Stepper
                    initialValue={1}
                    step={100}
                    inputWidth="210px"
                    inputHeight="33px"
                  />
                </div>
                <div style={{ marginLeft: "10px", marginTop: "5px" }}>
                  元/单
                </div>
              </div>
              <div className="addone">
                <div style={{ marginLeft: "-7px" }}>3-6点补贴：</div>
                <div>
                  <Stepper
                    initialValue={2}
                    step={100}
                    inputWidth="210px"
                    inputHeight="33px"
                  />
                </div>
                <div style={{ marginLeft: "10px", marginTop: "5px" }}>
                  元/单
                </div>
              </div>
            </div>

            <div className="oness">
              <div
                style={{
                  marginLeft: "10px",
                  backgroundColor: "#F5F5F5",
                  width: "70px",
                  borderRadius: "5px",
                  textAlign: "center",
                  marginTop: "-60px",
                }}
              >
                <i>天气补贴</i>
              </div>
              <div className="addone">
                <div style={{ marginLeft: "8px" }}>恶劣天气补贴</div>
                <div>
                  <Stepper
                    initialValue={3}
                    step={1}
                    inputWidth="210px"
                    inputHeight="33px"
                    inputLeft="35px"
                  />
                </div>
                <div style={{ marginLeft: "10px", marginTop: "5px" }}>
                  元/单
                </div>
              </div>
            </div>
            <button
              style={{
                width: "100px",
                height: "40px",
                marginLeft: "100px",
                marginTop: "20px",
                backgroundColor: "#4a91f7",
                borderRadius: "50px",
                border: "1px solid #ffff",
                color: "#ffff",
              }}
            >
              保存{" "}
            </button>
          </div>
        </TabPane>
      </Tabs>
      ,
    </div>
  );
}
